<template>
  <div>
    <!-- 面包屑   -->
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>线性折线图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h2>线性折线图<i class="el-icon-data-line"></i></h2>
    <el-divider></el-divider>
    <div id="consume"></div>
<!--    <el-row :gutter="20">-->
<!--      <el-col span="12"><div id="purchase"></div></el-col>-->
<!--      <el-col span="12"><div id="consume"></div></el-col>-->
<!--    </el-row>-->


  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "@/utils/request";

export default {
  name: "LineChart",
  data() {
    return {
      lineDate:[]
    }
  },
  created() {

  },
  mounted() {
    request.get('line').then(res=>{
      this.lineDate=res.data
      var chartDom = document.getElementById('consume');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '使用记录'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['办公耗材', '物资', '货物']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lineDate[0]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '办公耗材',
            type: 'line',
            data: this.lineDate[1]
          },
          {
            name: '物资',
            type: 'line',
            data: this.lineDate[2]
          },
          {
            name: '货物',
            type: 'line',
            data: this.lineDate[3]
          },
        ]
      };
      option && myChart.setOption(option);
    })


  },
  methods: {}
}
</script>

<style scoped>
#purchase{
  width: 100%;
  height: 400px;
}
#consume{
  width: 100%;
  height: 400px;
}
</style>